<template>
  <div>
    <el-row>
      <el-col :span="8">
        &nbsp;
      </el-col>
      <el-col :span="16">
        <el-row>
          <el-col :span="8">
            &nbsp;
          </el-col>
          <el-col :span="6">
            <el-input placeholder="搜索姓名或手机号" suffix-icon="el-icon-search" v-model="queryData.NameOrPhone" @blur="getData">
            </el-input>
          </el-col>
          <el-col :span="2">
            &nbsp;
          </el-col>
          <el-col :span="8">
            <el-select v-model="queryData.Day2" @change="getData">
              <el-option label="全部" value=""></el-option>
              <el-option label="一天内" value="1"></el-option>
              <el-option label="一周内" value="7"></el-option>
              <el-option label="一月内" value="30"></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <div>
      <ul>
        <li v-for="(item,index) in dataList" :key="index" class="j_item">
          <div class="j_item_title">
            {{item.username}}&nbsp;
            <span v-if="item.isprohibit">&nbsp;(已禁用)</span>
            <span v-if="true" style="color:red;font-size:15px;font-weight: initial;">预警数({{item.warningcount}})</span>
          </div>
          <div class="j_item_context">身份证号:{{item.idcard}}</div>
          <div class="j_item_context">联系电话:{{item.phone}}</div>
          <div>
            <togger :showData="item"></togger>
          </div>
          <div class="j_right_btn">
            <el-button v-if="!item.isprohibit" type="primary" size="mini" @click="jinYongDig(item.id)">禁用</el-button>
            <el-button v-else type="danger" size="mini" @click="prohibit(item.id,false)">解禁</el-button>
          </div>
        </li>
      </ul>
    </div>
    <div style="text-align:right;margin:15px 0;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryData.pageIndex"
        :page-sizes="[10, 20, 50, 100]" :page-size="queryData.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="禁用时间" :visible.sync="dialogVisible" width="30%">
      <div style="text-align:center">
        <el-radio-group v-model="jinYong.expirationDate">
          <el-radio :label="1">一天</el-radio>
          <el-radio :label="2">一周</el-radio>
          <el-radio :label="3">一个月</el-radio>
          <br>
          <el-radio :label="4">半年</el-radio>
          <el-radio :label="5">一年</el-radio>
          <el-radio :label="6">永远</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="prohibit(null,true)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import togger from ".././newApplication/toggerList";
  import {
    getAppointList,
    IsProhibit
  } from '@/api/user.js'

  export default {
    components: {
      togger
    },
    data() {
      return {
        dataList: [],
        dialogVisible: false,
        queryData: {
          NameOrPhone: "",
          Day1: "0",
          Day2: "",
          AppointStatus: 2,
          pageIndex: 1,
          pageSize: 10
        },
        total: 0,
        jinYong: {
          AppUserId: "",
          IsProhibit: true,
          expirationDate: 1,
        }
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        getAppointList(this.queryData).then(res => {
          this.dataList = res.data.list
          this.total = res.data.total
        })
      },
      jinYongDig(val){
        this.dialogVisible = !this.dialogVisible;
        this.jinYong.AppUserId = val;
      },
      prohibit(appId,isProhibit){
        this.dialogVisible = false;
        if(!isProhibit){
          this.jinYong.AppUserId = appId
        }
        this.jinYong.IsProhibit = isProhibit
        IsProhibit(this.jinYong).then(res=>{
          if (res.statusCode == 200) {
            this.getData();
          }
        })
      },
      handleSizeChange(val) {
        this.queryData.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.queryData.pageIndex = val;
        this.getData();
      }
    }
  };
</script>

<style scoped>
</style>
